<script setup>
import { ref } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'text'
  },
  placeholder: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:value', 'submit'])

const inputValue = ref(props.value)

function handleInput(e) {
  inputValue.value = e.target.value
  emit('update:value', inputValue.value)
}

function handleSubmit() {
  emit('submit', inputValue.value)
}
</script>

<template>
  <view class="input-container">
    <text v-if="label" class="input-label">{{ label }}</text>
    <view class="input-box">
      <input
        :value="inputValue"
        :type="type"
        :placeholder="placeholder"
        @input="handleInput"
        @keyup.enter="handleSubmit"
      >
    </view>
  </view>
</template>

<style scoped lang="scss">
.input-container {
  width: 100%;
  margin-bottom: 20rpx;
}

.input-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
  text-align: left;
}

.input-box {
  width: 100%;
  padding: 0 20rpx;
  height: 80rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  box-sizing: border-box;
  
  input {
    width: 100%;
    height: 100%;
    font-size: 28rpx;
  }
}
</style>
